<template>
  <!-- 搜索框 -->
  <div class="banner-content">
    <div class="search-bar">
      <!-- tab栏 -->
      <el-row
        type="flex"
        class="search-tab"
      >
        <span
          v-for="(item, index) in options"
          :key="index"
          :class="{active: index === currentOption}"
          @click="handleOption(index)"
        >
          <i>{{item.name}}</i>
        </span>
      </el-row>

      <!-- 输入框 -->
      <el-row
        type="flex"
        align="middle"
        class="search-input"
      >
        <input
          :placeholder="options[currentOption].placeholder"
          v-model="searchValue"
          @keyup.enter="handleSearch"
        />
        <i
          class="el-icon-search"
          @click="handleSearch"
        ></i>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          name: "攻略",
          placeholder: "搜索城市",
          pageUrl: "/post?city="
        },
        {
          name: "酒店",
          placeholder: "请输入城市搜索酒店",
          pageUrl: "/hotel?city="
        },
        {
          name: "机票",
          placeholder: "请输入出发地",
          pageUrl: "/air"
        }
      ],
      searchValue: "", // 搜索框的值
      currentOption: 0 // 当前选中的选项
    };
  },
  methods: {
    handleOption(index) {
      this.currentOption = index;
      if (this.options[index].name === "机票") {
        // 跳转到机票搜索
        this.$router.push(this.options[index].pageUrl);
      }
    },
    handleSearch() {
      const url = this.options[this.currentOption].pageUrl + this.searchValue;
      this.$router.push(url);
    }
  }
};
</script>
<style scoped lang="less">
.search-bar {
  width: 552px;
  margin: 0 auto;
}

.search-tab {
  .active {
    i {
      color: #333;
    }
    &::after {
      background: #eee;
    }
  }

  span {
    width: 82px;
    height: 36px;
    display: block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;

    i {
      position: absolute;
      z-index: 2;
      display: block;
      width: 100%;
      height: 100%;
      line-height: 30px;
      text-align: center;
      color: #fff;
    }

    &:after {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      border: 1px rgba(255, 255, 255, 0.2) solid;
      border-bottom: none;
      transform: scale(1.1, 1.3) perspective(0.7em) rotateX(2.2deg);
      transform-origin: bottom left;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 1px 2px 0 0;
      box-sizing: border-box;
    }
  }
}

.search-input {
  width: 550px;
  height: 46px;
  background: #fff;
  border-radius: 0 4px 4px 4px;
  border: 1px rgba(255, 255, 255, 0.2) solid;
  border-top: none;
  box-sizing: unset;

  input {
    flex: 1;
    height: 20px;
    padding: 13px 15px;
    outline: none;
    border: 0;
    font-size: 16px;
  }

  .el-icon-search {
    cursor: pointer;
    font-size: 22px;
    padding: 0 10px;
    font-weight: bold;
  }
}
</style>